
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>职师学院新生寝室大赛信息网</title>
    <link rel="stylesheet" type="text/css" href="static/js/lightbox/css/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="static/css/pagination.css" />
    <link rel="stylesheet" type="text/css" href="static/css/public.css?v=121352222" />
    <link rel="stylesheet" href="static/css/swiper.min.css">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul li{
            list-style: none;
        }
        #nav ul li{
            float: left;
        }
        #rootShow ul li{
            float: left;
            margin-right: 32px;
        }
        #rootShow .item, #rootShow img,#history img,#vote img{
            width: 185px;
            height: 150px;
        }
        #rootShow .item,#history .item,#vote .item{
            width: 185px;
            height: 180px;
        }
        #rootShow p{
          /*  text-align: center;*/
            line-height: 30px;
        }
        #item div{
            width: 480px;
            height: 482px;
            float: left;
        }
        #item div p{
            line-height: 30px;
            background: #AB2A84;
            color: #fff;
            text-indent: 20px;
        }
        #item div{
            border: 1px #ccc solid;
            margin-top: 20px;
        }
        #item div.index{
            margin-right: 16px;
        }
        #rootShow ul  {
            /*width: 2800px;*/
            height: 300px;
            margin-left:38px;
           /* margin-right: 20px;*/
            margin-top: 20px;
        }
        #history ul li,#vote ul li{
            float: left;
            margin-right: 32px;
        }
        #history ul,#vote ul{
           /* width: 2800px;*/
            margin-top: 20px;
            height: 300px;
            margin-left:38px;
            /* margin-right: 20px;*/
            margin-top: 20px;
        }

        .swiper-container {
            width: 100%;
            height: 350px;
        }
    </style>
</head>
<body>
      <jsp:include page="head.jsp"></jsp:include>

      <div id="main" >
          <!-- Swiper -->
          <div class="swiper-container" >
              <div class="swiper-wrapper" >
                  <div class="swiper-slide">
                      <img width="100%" src="static/images/20190412144028.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img  width="100%" src="static/images/banner1.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img width="100%"  src="static/images/banner3.jpg">
                  </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
              <!-- Add Arrows -->
              <%--<div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>--%>
          </div>
          <div id="item">
             <div class="index">
                 <p>本届赛事</p>

                 <ul id="thisRace" style="margin: 20px;">
                     <li>

                     </li>
                 </ul>
             </div>
             <div id="rootShow" >
                 <p>寝室风采
                     <a  href="/rootShow?index=2" style="text-decoration: none;float: right;margin-right: 10px;color: #EEEEEE;">更多></a>
                 </p>

                 <ul >

                 </ul>

             </div>
             <div class="index" id="history">
                 <p>历届作品
                     <a  href="/rootShow?flag=history&index=3" style="text-decoration: none;float: right;margin-right: 10px;color: #EEEEEE;">更多></a>
                 </p>
                 <ul>

                 </ul>
             </div>
             <div id="vote">
                 <p>网上投票
                     <a  href="/votePage?index=5" style="text-decoration: none;float: right;margin-right: 10px;color: #EEEEEE;">更多></a>
                 </p>
                 <ul></ul>
                 <%--<div>点我去投票</div>--%>
             </div>
         </div>
        </div>
      <jsp:include page="footer.jsp"></jsp:include>
    <script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.pagination.js"></script>
    <script type="text/javascript" src="static/js/lightbox/js/lightbox.min.js"></script>
      <script type="text/javascript" src="static/js/common.js"></script>
    <script src="static/js/swiper.min.js"></script>

    <script type="text/javascript">
        var flag=getQueryString("flag");
        $(function () {

            $.getJSON("thisRace/getAllData",function (data) {
                if(data.length>0){
                    $("#thisRace  li").html('<a href="/theGame?index=4">'+data[0].title+'</a><p style="background: none;color: #333;font-size: 12px;">'+data[0].raceContent.substring(0,145)+'...</p>');
                }
                else{
                    $("#thisRace  li").html('当前没有赛事！');
                }
            });


            $.getJSON("/rootManage/getPageList",{"pageSize":4,"pageNum":1},function (data) {
                $("#rootShow ul").html("");
                for(var i=0;i<data.rows.length;i++){
                    var html="";
                    html+=' <li>';
                    html+='   <div class="item">';
                    html+='       <a href="/upload'+data.rows[i].roomImg+'" data-lightbox="img1" data-title="'+data.rows[i].roomNumber+'">';
                    html+='       <img src="/upload'+data.rows[i].roomImg+'">';
                    if(flag==="history"){
                        var score=data.rows[i].endScore;
                        if(score==null){
                            score="";
                        }
                       html+='       <p style="font-size: 12px;">'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'&nbsp;&nbsp;得分:'+score+'</p>';
                    }
                    else{
                       html+='       <p style="font-size: 12px;">'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'</p>';
                    }
                    html+='    </a>';
                    html+='  </div>';
                    html+='   </li>';
                    $("#rootShow ul").append(html);
                }
            })

            $.getJSON("/rootManage/getPageList",{"pageSize":4,"pageNum":1},function (data) {
                $("#history ul").html("");
                for(var i=0;i<data.rows.length;i++){
                    var html="";
                    html+=' <li>';
                    html+='   <div class="item">';
                    html+='       <a href="/upload'+data.rows[i].roomImg+'" data-lightbox="img1" data-title="'+data.rows[i].roomNumber+'">';
                    html+='       <img src="/upload'+data.rows[i].roomImg+'">';

                        var score=data.rows[i].endScore;
                        if(score==null){
                            score="";
                        }
                        html+='       <p style="font-size: 12px;">'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'&nbsp;&nbsp;得分:'+score+'</p>';

                    html+='    </a>';
                    html+='  </div>';
                    html+='   </li>';
                    $("#history ul").append(html);


                    html="";
                    html+=' <li>';
                    html+='   <div class="item">';
                    html+='       <a href="/upload'+data.rows[i].roomImg+'" data-lightbox="img1" data-title="'+data.rows[i].roomNumber+'">';
                    html+='       <img src="/upload'+data.rows[i].roomImg+'">';
                    html+='       <p style="font-size: 12px;">'+data.rows[i].year+'届&nbsp;&nbsp;'+data.rows[i].roomNumber+'&nbsp;&nbsp;得票：'+data.rows[i].num+'</p>';
                    html+='    </a>';
                    html+='  </div>';
/*                    html+='  <div style="text-align: center;margin-bottom: 10px;"></div>';
                    html+='  <div style="text-align: center"><button onclick="toVote('+data.rows[i].id+')" type="button">投票给Ta</button></div>';*/
                    html+='   </li>';
                    $("#vote ul").append(html)
                }
            })




            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 1,
                spaceBetween: 30,
                autoplay:true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                /*navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }*/
            });
        });


        $("#nav ul li").click(function(){
            /*当前标签下的a标签*/
            var obj = $(this).children("a");
            /*获取第一个a标签，进行跳转*/
            window.location.href=$(obj[0]).attr("href");
        });
    </script>
</body>
</html>
